<template>
  <!-- Main content -->
  <section class="content">
    <div class="row">
      <div class="col-xs-12">
        <div class="box box-info">
          <div class="box-header with-border">
            <h3 class="box-title">数据列表</h3>
            <button type="button" v-if="$_has('sys:paypal:add')" class="btn btn-primary pull-right" data-toggle="modal" @click="addPayPal" data-target="#modal-default">
              添加PayPal账号
            </button>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <table id="example2" class="table table-bordered table-hover">
              <thead>
              <tr>
                <th>账号名称</th>
                <th>授权用户名</th>
                <th>授权密码</th>
                <th>授权令牌</th>
                <th>状态</th>
                <th v-if="$_has('sys:paypal:edit')">操作</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(paypal,index) in paypalList" :key="index">
                <td>{{paypal.userName}}</td>
                <td>{{paypal.authorUserName}}</td>
                <td>{{paypal.password}}</td>
                <td>{{paypal.token}}</td>
                <td v-if="$_has('sys:paypal:edit')">{{getPaypalAccoutStatus(paypal.status)}}</td>
                <td>
                  <a href="javascript:;" class="text-green m-lr-10"
                      @click="editPaypalAccount(paypal.id,paypal.status)">{{getEditPaypalStatus(paypal.status)}}</a>
                </td>
              </tr>
              </tbody>
            </table>
            <div class="clearfix">
              <div class="m-t-15 pull-right">
                <pagination :total="pages.paypalPageList.total" :current-page='pages.paypalPageList.pageNum'
                            :display="pages.paypalPageList.pageSize" @pagechange="pagechange"></pagination>
              </div>
            </div>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->

      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
    <div class="modal fade" id="modal-default" ref="modalDefault">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">添加PayPal账号</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <div class="box-body">
                <div class="form-group">
                  <div class="col-sm-12 flex">
                    <label class="control-label min-width">账号名称：</label>
                    <div class="inline-block">
                      <input v-model="submitPaypayAccount.userName" type="text" class="form-control" placeholder="PayPal账号">
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-12 flex">
                    <label class="control-label min-width">授权用户名：</label>
                    <div class="inline-block">
                      <input v-model="submitPaypayAccount.authorUserName" type="text" class="form-control" placeholder="API用户名">
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-12 flex">
                    <label class="control-label min-width">授权密码：</label>
                    <div class="inline-block">
                      <input v-model="submitPaypayAccount.password" type="text" class="form-control" placeholder="PayPal密码">
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-12 flex">
                    <label class="control-label min-width">授权令牌：</label>
                    <div class="inline-block">
                      <input v-model="submitPaypayAccount.token" type="text" class="form-control" placeholder="PayPal令牌">
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" v-if="!paupalFlag" @click="addPaypalAccount()">保存</button>
            <button type="button" class="btn btn-primary" v-else data-dismiss="modal" @click="addPaypalAccount()">保存</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
  </section>
  <!-- /.content -->


</template>

<script>
  import instance from '@/api/index.js'
  import pagination from '@/components/common/pageComponent'

  export default {
    name: "payPalAccountManagement",
    data() {
      return {
        paypalStatus: new Map(),
        editPaypalStatus: new Map(),//账户修改按钮显示
        paypalList: [], //页面显示list
        submitPaypayAccount: {},//创建账户数据
        show: false,
        paypalParam: {},
        paupalFlag:false,
        pages: {
          paypalPageList: {
            total: 0,
            pageNum: 1,
            pageSize: 10
          }
        },
      }
    },
    methods: {
      //获取paypal数据列表
      getPaypalAccountList: function () {
        let vm = this;
        this.paypalParam.rows = 10;
        instance.post('/paypal/paypalList', vm.paypalParam).then(function (data) {
          vm.paypalList = data.data.data.list;
          vm.pages.paypalPageList = data.data.data;
          console.log(data)
          vm.show = false;//loading加载
        })
      },
      //创建用户
      addPaypalAccount:function(){
        let vm = this;
        if(!vm.submitPaypayAccount.userName){
          vm.$message.error('请填写账号名称！');
          return;
        }
        if(!vm.submitPaypayAccount.authorUserName){
          vm.$message.error('请填写授权用户名！');
          return;
        }
        if(!vm.submitPaypayAccount.password){
          vm.$message.error('请填写授权密码！');
          return;
        }
        if(!vm.submitPaypayAccount.token){
          vm.$message.error('请填写授权令牌！');
          return;
        }
        vm.paupalFlag = true;
        if(vm.paupalFlag){
          $('#modal-default').modal("hide")
          instance({
            method:'post',
            url:"paypal/addPaypal",
            data:vm.submitPaypayAccount
          }).then(function (data) {
            vm.submitPaypayAccount = {};
            console.log(data)
            vm.getPaypalAccountList();
          });
        }
      },
      editPaypalAccount:function(id,status){
        let vm = this;
        vm.submitPaypayAccount = {};
        vm.submitPaypayAccount.id = id;
        vm.submitPaypayAccount.status = status == '1' ? '0':"1";
        instance.post('/paypal/editPaypalAccountStatus', vm.submitPaypayAccount).then(function (data) {
          vm.submitPaypayAccount = {};
          vm.getPaypalAccountList();
        })
      },
      //添加paypal账号
      addPayPal:function(){
        for (let key in this.submitPaypayAccount){
          this.submitPaypayAccount[key] = '';
        }
        this.paupalFlag = false;
      },
      //账户状态获取
      getPaypalAccoutStatus:function(_key) {
        return this.paypalStatus.get(_key);
      },
      //修改账户状态按钮获取
      getEditPaypalStatus:function(_key){
        return this.editPaypalStatus.get(_key);
      },
      // 获取分页
      pagechange: function (currentPage, display) {
        this.paypalParam.page = currentPage;
        this.paypalParam.rows = display;
        this.pages.paypalPageList.pageNum = currentPage;
        this.getPaypalAccountList();
      },
    },
    components: {
      pagination
    },
    created() {
      this.paypalStatus.set('1', '启用')
      this.paypalStatus.set('0', '禁用')
      this.editPaypalStatus.set('1', '禁用')
      this.editPaypalStatus.set('0', '启用')
      this.getPaypalAccountList();
    }
  }
</script>

<style scoped>

</style>
